<?php
	$style = $controller->getStyle();
	$etat = $controller->getEtat();
?>

	<script type="text/javascript">
    	var fontSize = new Array("16px","20px","30px","40px","60px","80px","100px","120px","140px","160px","180px","200px");
		var fontWeight = new Array("normal","bold");
		var fontFamily = new Array("Times New Roman","Arial","Courier New","Georgia","Verdana","Geneva","Comic Sans MS");
		var letterSpacing = new Array("1pt","3pt","5pt","7pt","9pt","11pt","13pt","15pt","17pt","19pt","21pt","23pt","25pt");
		
		function getArray(name){
			switch(name){
				case 'fontSize' : return fontSize;
				case 'fontWeight' : return fontWeight;
				case 'fontFamily' : return fontFamily;
				case 'letterSpacing' : return letterSpacing;
				default : return null;
			}
		}
		
		function getIndex(tab, value){
			for(i = 0; i < tab.length; i++){
				if(tab[i] == value) return i;
			}
			return -1;
		}
		function apercu(input) {
			if(input.parentNode.className == 'picker color-picker'){
				var labels = input.parentNode.getElementsByTagName("label");
				var inp;
				for (i=0;i<labels.length;i++) {
					labels[i].className = '';
					if(labels[i].getAttribute('for') == input.id) inp = i;
				}
				input.parentNode.getElementsByTagName("label")[inp].className = 'selected';
			}
			var att = input.name;
			var value = input.value;
			setStyleAttribute(att,value);
		}
		function changeValue(name,action){
			var tab = getArray(name);
			var input = getInputsByName(name)[0];
			var index = getIndex(tab, input.value);
			switch(action){
				case '+' : {index++; break;}
				case '-' : {index--; break;}
				default : break;
			}
			if(index > -1 && index < tab.length){
				input.value = tab[index];
				document.getElementById(name).firstChild.nodeValue = tab[index];
				apercu(input);
			}
		}
		
		function getInputsByName(name){
			var elements = document.getElementsByName(name);
			var inputs = new Array();
			for(i = 0; i < elements.length; i++){
				if(elements[i].nodeName == 'INPUT') inputs[inputs.length] = elements[i];	
			}
			return inputs;
		}
		
		function setStyleAttribute(attribute, value){
			switch(attribute){
				case 'backgroundColor' : {
					document.getElementById("apercu").style.backgroundColor = value;
					break;
				}
				case 'fontSize' : {
					document.getElementById("apercu").style.fontSize = value;
					break;
				}
				case 'fontWeight' : {
					document.getElementById("apercu").style.fontWeight = value;
					break;
				}
				case 'fontFamily' : {
					document.getElementById("apercu").style.fontFamily = value;
					break;
				}
				case 'letterSpacing' : {
					document.getElementById("apercu").style.letterSpacing = value;
					break;
				}
				case 'color' : {
					document.getElementById("apercu").style.color = value;
					break;
				}
				case 'linkColor' : {
					document.getElementById("apercu").getElementsByTagName('a')[0].style.color = value;
					break;
				}
				default : {
					break;
				}
			}
		}
    </script>
	<form action="<?php echo $etat['previous'] ?>" method="post" class="parametrage" style="float:left;">
        <fieldset class="picker color-picker" id="background-color">
            <legend>Couleur de fond</legend>
            
            <label <?php if($style['bgColor']=='black'){echo 'class="selected"';} ?> for="bg-color-black" style="background-color: black;"></label>
            <input type="radio" value="black" <?php if($style['bgColor']=='black'){echo 'checked="checked"';}?> name="backgroundColor" id="bg-color-black" onfocus="apercu(this);" />
            
            <label <?php if($style['bgColor']=='white'){echo 'class="selected"';} ?> for="bg-color-white" style="background-color: white;"></label>
            <input type="radio" value="white" <?php if($style['bgColor']=='white'){echo 'checked="checked"';}?> name="backgroundColor" id="bg-color-white" onfocus="apercu(this);" />
            
            <label <?php if($style['bgColor']=='green'){echo 'class="selected"';} ?> for="bg-color-green" style="background-color: green;"></label>
            <input type="radio" value="green" <?php if($style['bgColor']=='green'){echo 'checked="checked"';}?> name="backgroundColor" id="bg-color-green" onfocus="apercu(this);" />
            
            <label <?php if($style['bgColor']=='yellow'){echo 'class="selected"';} ?> for="bg-color-yellow" style="background-color: yellow;"></label>
            <input type="radio" value="yellow" <?php if($style['bgColor']=='yellow'){echo 'checked="checked"';}?> name="backgroundColor" id="bg-color-yellow" onfocus="apercu(this);" />
            
            <label <?php if($style['bgColor']=='blue'){echo 'class="selected"';} ?> for="bg-color-blue" style="background-color: blue;"></label>
            <input type="radio" value="blue" <?php if($style['bgColor']=='blue'){echo 'checked="checked"';}?> name="backgroundColor" id="bg-color-blue" onfocus="apercu(this);" />
            
            <label <?php if($style['bgColor']=='red'){echo 'class="selected"';} ?> for="bg-color-red" style="background-color: red;"></label>
            <input type="radio" value="red" <?php if($style['bgColor']=='red'){echo 'checked="checked"';}?> name="backgroundColor" id="bg-color-red" onfocus="apercu(this);" />
            <br />
        </fieldset>
        <fieldset class="picker color-picker" id="text_color_picker">
            <legend>Couleur du texte</legend>
            <label <?php if($style['color']=='black'){echo 'class="selected"';} ?> for="color-black" style="background-color: black;"></label>
            <input type="radio" value="black" <?php if($style['color']=='black'){echo 'checked="checked"';}?> name="color" id="color-black" onfocus="apercu(this);" />
            
            <label <?php if($style['color']=='white'){echo 'class="selected"';} ?> for="color-white" style="background-color: white;"></label>
            <input type="radio" value="white" <?php if($style['color']=='white'){echo 'checked="checked"';}?> name="color" id="color-white" onfocus="apercu(this);" />
            
            <label <?php if($style['color']=='green'){echo 'class="selected"';} ?> for="color-green" style="background-color: green;"></label>
            <input type="radio" value="green" <?php if($style['color']=='green'){echo 'checked="checked"';}?> name="color" id="color-green" onfocus="apercu(this);" />
            
            <label <?php if($style['color']=='yellow'){echo 'class="selected"';} ?> for="color-yellow" style="background-color: yellow;"></label>
            <input type="radio" value="yellow" <?php if($style['color']=='yellow'){echo 'checked="checked"';}?> name="color" id="color-yellow" onfocus="apercu(this);" />
            
            <label <?php if($style['color']=='blue'){echo 'class="selected"';} ?> for="color-blue" style="background-color: blue;"></label>
            <input type="radio" value="blue" <?php if($style['color']=='blue'){echo 'checked="checked"';}?> name="color" id="color-blue" onfocus="apercu(this);" />
            
            <label <?php if($style['color']=='red'){echo 'class="selected"';} ?> for="color-red" style="background-color: red;"></label>
            <input type="radio" value="red" <?php if($style['color']=='red'){echo 'checked="checked"';}?> name="color" id="color-red" onfocus="apercu(this);" />
            <br />
        </fieldset>
		<fieldset class="picker color-picker" id="link_color_picker">
            <legend>Couleur des liens</legend>
            <label <?php if($style['linkColor']=='black'){echo 'class="selected"';} ?> for="l-color-black" style="background-color: black;"></label>
            <input type="radio" value="black" <?php if($style['linkColor']=='black'){echo 'checked="checked"';}?> name="linkColor" id="l-color-black" onfocus="apercu(this);" />
            
            <label <?php if($style['linkColor']=='white'){echo 'class="selected"';} ?> for="l-color-white" style="background-color: white;"></label>
            <input type="radio" value="white" <?php if($style['linkColor']=='white'){echo 'checked="checked"';}?> name="linkColor" id="l-color-white" onfocus="apercu(this);" />
            
            <label <?php if($style['linkColor']=='green'){echo 'class="selected"';} ?> for="l-color-green" style="background-color: green;"></label>
            <input type="radio" value="green" <?php if($style['linkColor']=='green'){echo 'checked="checked"';}?> name="linkColor" id="l-color-green" onfocus="apercu(this);" />
            
            <label <?php if($style['linkColor']=='yellow'){echo 'class="selected"';} ?> for="l-color-yellow" style="background-color: yellow;"></label>
            <input type="radio" value="yellow" <?php if($style['linkColor']=='yellow'){echo 'checked="checked"';}?> name="linkColor" id="l-color-yellow" onfocus="apercu(this);" />
            
            <label <?php if($style['linkColor']=='blue'){echo 'class="selected"';} ?> for="l-color-blue" style="background-color: blue;"></label>
            <input type="radio" value="blue" <?php if($style['linkColor']=='blue'){echo 'checked="checked"';}?> name="linkColor" id="l-color-blue" onfocus="apercu(this);" />
            
            <label <?php if($style['linkColor']=='red'){echo 'class="selected"';} ?> for="l-color-red" style="background-color: red;"></label>
            <input type="radio" value="red" <?php if($style['linkColor']=='red'){echo 'checked="checked"';}?> name="linkColor" id="l-color-red" onfocus="apercu(this);" />
            <br />
        </fieldset>
		<div style="clear:left;"></div>
        <fieldset class="picker" style="float:left;">
        	<legend>Taille du texte</legend>
            <p id="fontSize"><?php echo $style['fontSize']?></p>
            <input type="hidden" name="fontSize" value="<?php echo $style['fontSize']?>"/>
            <div>
                <button type="button" onclick="changeValue('fontSize','-');">-</button>
                <button type="button" onclick="changeValue('fontSize','+');">+</button>
            </div>
        </fieldset>
        <fieldset class="picker" style="float:left;">        
            <legend>Epaisseur du texte</legend>
            <p id="fontWeight"><?php echo $style['fontWeight']?></p>
            <input type="hidden" name="fontWeight" value="<?php echo $style['fontWeight']?>"/>
            <div>
                <button type="button" onclick="changeValue('fontWeight','-');">-</button>
                <button type="button" onclick="changeValue('fontWeight','+');">+</button>
            </div>
        </fieldset>
		<div style="clear:left;"></div>
        <fieldset class="picker" style="float:left;">  
        	<legend>Police</legend>      
			<p id="fontFamily"><?php echo $style['fontFamily']?></p>
            <input type="hidden" name="fontFamily" value="<?php echo $style['fontFamily']?>"/>
            <div>
                <button type="button" onclick="changeValue('fontFamily','-');">-</button>
                <button type="button" onclick="changeValue('fontFamily','+');">+</button>
            </div>
        </fieldset>
        <fieldset class="picker" style="float:left;">
        	<legend>Espacement</legend>       
			<p id="letterSpacing"><?php echo $style['letterSpacing']?></p>
            <input type="hidden" name="letterSpacing" value="<?php echo $style['letterSpacing']?>"/>
            <div>
                <button type="button" onclick="changeValue('letterSpacing','-');">-</button>
                <button type="button" onclick="changeValue('letterSpacing','+');">+</button>
            </div>
        </fieldset>
		<div style="clear:left;"></div><br/>
        <input name="style" type="submit" value="valider"/>
		<input name="retour" type="submit" value="retour"/>
    </form>
	<div id="apercu" style="float:left; width:50%;
            	<?php 
					echo 'letter-spacing : ',$style['letterSpacing'],';',
						'font-family : ',$style['fontFamily'],';',
						'font-weight : ',$style['fontWeight'],';',
						'font-size : ',$style['fontSize'],';',
						'color : ',$style['color'],';',
						'background-color : ',$style['bgColor'],';';
				?>
            ">
				Ceci est un aper&ccedil;u, vous pouvez selectionner 
				<ul>
					<li>la couleur de fond</li>
					<li>La couleur de texte</li>
					<li>La couleur des liens qui apparaitront comme ceci : 
						<a style="font-weight:bold; text-decoration:none; <?php 
					echo 'color : ',$style['linkColor'],';'?>" href="#" title="ceci est un apercu">lien</a>
					</li>
					<li>La taille du texte</li>
					<li>L'&eacute;paisseur du texte</li>
					<li>La famille de police</li>
					<li>L'espacement entre les caract&egrave;res</li>
				</ul>
			</div>